<template>
  <div>
    <el-button
      size="small"
      v-if="allImages == false"
      type="primary"
      @click="downloadFunc"
      :disabled="disabled"
      >下载</el-button
    >
    <el-button
      size="small"
      v-else-if="allImages == true"
      type="primary"
      @click="look"
      >查看</el-button
    >
    <el-button size="small" v-else-if="allImages === 'e'">无附件</el-button>
    <el-dialog
      :title="this.$store.state.mindName"
      :visible.sync="dialogVisible"
      v-if="this.value && PDF != '.pdf'"
      width="50%"
      append-to-body
    >
      <div id="img_pdf">  
        <template>
          <el-image
            :src="this.review[0]"
            :preview-src-list="this.review"
          ></el-image>
        </template>
      </div>
    </el-dialog>
    <el-dialog
      :title="this.$store.state.mindName"
      :visible.sync="dialogVisible"
      v-else-if="PDF == '.pdf'"  
      fullscreen
      width="50%"
      :show-close="false"
      append-to-body
    >
      <div class="img_pdg">
         <div class="goto" @click="dialogVisible = false">
          <i class="el-icon-back"></i>
          <span>{{$store.state.mindName}}</span>
        </div>
        <template>
          <div id="pdf_upt" @mouseover="changeActive" @mouseout="removeActive">
            <iframe
              class="ifrname"
              :src="this.review[index]"
              type="application/x-google-chrome-pdf"
              width="100%"
              height="100%"
            />
            <div :class="[isshow == true ? 'pdf_left' : '']" @click="left">
              <i class="el-icon-d-arrow-left"></i>
            </div>
            <div :class="[isshow == true ? 'pdf_right' : '']" @click="right">
              <i class="el-icon-d-arrow-right"></i>
            </div>
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { downloadFile } from "../download";
export default {
  name: "XDDownloader",
  props: {
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: false,
      PDF: "",
      fullscreen: true,
      index: 0,
      oplist: [],
      isshow: false,
    };
  },
  created() {
  if(this.value==null){

  }else{
    if(this.value.includes(',')){
      this.oplist = this.value.split(",");
    }
  }
   
    
  },
  computed: {
    //预览
    review: function () {
      if (this.value) {
        let temp = [];
        if (this.value.indexOf(",") >= 0) {
          let split = this.value.split(",");
          for (var i = 0; i < split.length; i++) {
            if (split[i] != "") {
              temp.push(split[i]);
            }
          }
          return temp;
        } else {
          temp.push(this.value);
          return temp;
        }
      }
    },
    allImages: function () {
      if (this.value) {
        if (this.value.indexOf(",") >= 0) {
          let split = this.value.split(",");
          for (var i = 0; i < split.length; i++) {
            if (split[i] != "") {
              let a = this.legalExt(split[i]);
              if (!a) {
                return false;
              }
            }
          }
          return true;
        } else {
          if (this.legalExt(this.value)) {
            return true;
          } else {
            return false;
          }
        }
      } else {
        return "e";
      }
    },
  },
  methods: {
    changeActive() {
      this.isshow = true;
    },
    removeActive() {
      this.isshow = false;
    },
    left() {
      if (this.index == 0) {
        this.$message({
          message: "没有更多了",
          type: "warning",
        });
        return;
      } else {
        this.index -= 1;
      }
    },
    right() {
      if (this.oplist.length - 1 == this.index) {
        this.$message({
          message: "没有更多了",
          type: "warning",
        });
        return;
      } else {
        this.index += 1;
      }
    },
    //查看
    look() {
      this.dialogVisible = true;
    },
    //下载
    downloadFunc() {
      if (this.value.indexOf(",") >= 0) {
        let split = this.value.split(",");
        for (var i = 0; i < split.length; i++) {
          if (split[i] != "") {
            let num = split[i].lastIndexOf(".");
            let dis = split[i].substring(num + 1, num + 4);

            if (dis == "pdf" || dis == "PDF") {
              downloadFile(split[i], "a");
            } else {
              downloadFile(split[i], "iframe");
            }
          }
        }
      } else {
        let num = this.value.lastIndexOf(".");
        let dis = this.value.substring(num + 1, num + 4);
        if (dis == "pdf" || dis == "PDF") {
          downloadFile(this.value, "a");
        } else {
          downloadFile(this.value, "iframe");
        }
      }
    },
    // 支持类型
    legalExt(filename) {
      let supportExt = [
        ".pdf",
        ".PDF",
        ".png",
        ".PNG",
        ".jpg",
        ".JPG",
        ".jpeg",
        ".JPEG",
      ];
      for (let i = 0; i < supportExt.length; i++) {
        this.PDF = supportExt[i];
        if (filename.indexOf(supportExt[i]) > 0) {
          return true;
        }
      }
      return false;
    },
  },
  watch: {
    // "value": function() {
    //     this.model = this.value
    // }
  },
};
</script>
<style lang="scss" scoped>
:deep(.el-dialog) .el-dialog__body {
  height: 100%;
  display: flex;
  justify-content: center;
}

#img_pdf {
 
  // height: 60vh;
  overflow-y: scroll;
}
.img_pdg {
 width: 100%; 
  height: 80vh;
  
  .goto{
    margin-bottom: 20px;
      .el-icon-back {
        font-size: 50px;
      }
  }
 
}
#pdf_upt {
  width: 100%;
  height: 100%;
  position: relative;
  .ifrname {
    width: 100%;
    height: 100%;
  }
  .pdf_left {
    position: absolute;
    width: 100px;
    height: 100px;
    transition: all 0.5s;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    .el-icon-d-arrow-left {
      font-size: 100px;
      color: #1488f5;
    }
  }
  .pdf_right {
    position: absolute;
    width: 100px;
    height: 100px;
    transition: all 0.5s;
    right: 0;
    top: 50%;
    transform: translate(-50%, 0);
    .el-icon-d-arrow-right {
      font-size: 100px;
      color: #1488f5;
    }
  }
}
</style>
